<template>
  <div class="part-one">
    <h1 class="part-one-title">建木</h1>
    <span class="part-one-desc"
    >建木是一个面向DevOps领域的极易扩展的开源无代码(图形化)/低代码(GitOps)工具。可以帮助用户轻松编排各种DevOps流程并分发到不同平台执行。</span
    >
    <div class="badges">
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://gitee.com/jianmu-dev/jianmu/badge/star.svg?theme=gvp' alt='gitee star'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu/blob/master/LICENSE">
          <img src='https://img.shields.io/badge/liscense-MulanPSL--2.0-green.svg' alt='license'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/OS%2FARCH-AMD64%2FARM64-important.svg' alt='os/arch'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img
            src='https://img.shields.io/badge/-%E6%97%A0%E4%BB%A3%E7%A0%81(%E5%9B%BE%E5%BD%A2%E5%8C%96)-brightgreen.svg'
            alt='无代码(图形化)'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/-%E4%BD%8E%E4%BB%A3%E7%A0%81(GitOps)-brightgreen.svg'
               alt='低代码(GitOps)'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/devops-yellow.svg' alt='devops'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/CI%2FCD%2FCO-yellow.svg' alt='ci/cd/co'/>
        </a>
      </div>
      <div>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/JDK11+-lightgrey.svg' alt='jdk'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/MySQL8+-lightgrey.svg' alt='mysql'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Vue3-lightgrey.svg' alt='vue'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Typescript4+-lightgrey.svg' alt='typescript'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Docker-lightgrey.svg'/>
        </a>
        <a target="_blank" href="https://gitee.com/jianmu-dev/jianmu">
          <img src='https://img.shields.io/badge/Kubernetes-lightgrey.svg'/>
        </a>
      </div>
    </div>
    <div class="the-transition">
      <img src="~@/assets/web/pngs/the-transition.png"/>
    </div>
  </div>
</template>
<style lang="less" scoped>
.part-one {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #042749;

  .part-one-title {
    font-size: 40px;
    font-weight: 600;
  }

  .part-one-desc {
    margin-top: 44px;
    width: 676px;
    font-size: 16px;
    line-height: 30px;
  }

  .badges {
    margin: 32px 0 60px;

    div {
      height: 24px;
      margin-bottom: 12px;
      &:last-child{
        margin-bottom: 0;
      }

      a {
        height: 100%;
        margin-right: 8px;
        display: inline-block;

        img {
          width: 100%;
          height: 100%;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .the-transition {
    width: 122px;

    img {
      width: 100%;
    }
  }
}
</style>
